<template>
  <div v-if="props.binaryState || props.tabsState" class="fileTips">
    <div v-show="props.binaryState" class="dataNotRender">
      <div class="top-title">
        <i class="el-icon-warning-outline icon" />
        <span>该文件为二进制文件或使用不支持的文本编码</span>
      </div>
      <div class="conter-img">
        <div class="ms-Image">
          <svg-icon icon-class="notData" />
          <span class="text">预览不可用</span>
        </div>
      </div>
    </div>
    <div v-show="props.tabsState" class="dataNotRender">
      <div class="conter-img">
        <div class="ms-Image">
          <!-- <img class="svg-icon" :src="FileResources"> -->
          <span class="text">文件资源管理器窗格</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import FileResources from '@/views/Canvas/RunContainer/img/img.js'
const props = defineProps({
  binaryState: {
    type: Boolean,
    required: false
  },
  tabsState: {
    type: Boolean,
    required: true
  }
})
</script>

<style lang="scss" scoped>
.fileTips {
  height: 100%;

  .dataNotRender {
    height: 100%;

    .top-title {
      height: 32px;
      background: rgba(255, 200, 10, 0.2);
      line-height: 32px;
      font-size: 14px;

      .icon {
        margin: 0 5px;
      }
    }

    .conter-img {
      height: calc(100% - 32px);
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      -ms-flex-wrap: nowrap;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: center;
      justify-content: center;

      .ms-Image {
        max-width: 250px;
        max-height: 278px;
        width: 50%;
        height: 50%;
        text-align: center;

        .svg-icon {
          width: 100%;
          height: 100%;
          max-width: 250px;
          max-height: 250px;
          display: block;
        }

        .text {
          font-size: 20px;
          font-weight: 600;
          display: inline;
        }
      }
    }
  }
}
</style>
